<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #rbod {
            width: 400px;
            float: right;
            position: relative;
        }
        #lbod {
            width: 400px;
            float: left;
            position: relative;
        }
    </style>

    <link rel="stylesheet" type="text/css" th:href="@{/resource/uploadify/uploadify.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/resource/jquery.Jcrop.css}">

    <script type="text/javascript" th:src="@{/resource/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/resource/uploadify/jquery.uploadify.min.js}"></script>
    <script type="text/javascript" th:src="@{/resource/jquery.Jcrop.js}"></script>

</head>
<body>

<div id="up">

    <div id="lbod">
        <h1>上传</h1>
        <form action="/shuiyin/index/update" enctype="multipart/form-data" method="post">
        <input type="file" name="image1">
        <input type="submit" value="上传" id="but-submit">
        </form>
        <div th:text="${path1}"></div>
        <img th:src="@{'/images/'+${path1}}" style="width: 350px;height: auto"/>
    </div>


    <div id="rbod">
        <form action="/shuiyin/index/waterMark" enctype="multipart/form-data" method="post">
            <input type="text" name="jjj" >
            <input type="submit" value="添加水印文字">
        </form>
        <h1>加水印</h1>

        <form action="/shuiyin/cut" method="post">
            name:<input type="text" name="imagename">
          <!-- 名字： <input type="text" id="srcname" name="srcname">-->
           x: <input type="text" id="x" name="x" />
           y: <input type="text" id="y" name="y" />
           w: <input type="text" id="w" name="w" />
           h: <input type="text" id="h" name="h" />
            <!--<input type="submit" value="裁剪" id="cut-submit">-->
            <input type="submit" value="裁剪">
        </form>


        <img id="srcImage" th:src="@{'/images/'+${path2}}" style="width: 350px;height: auto"/>
    </div>

    <!--修改后-->
    <div>
        <img th:src="@{'/images/'+${cut1}}" style="height: 200px;width: auto"/>
        <!--<img id="userImg" name="userImg" th:src="@{'/images/'+${cut1}}" style="height: 200px;width: auto"/>-->
    </div>
</div>

</body>
<!--<script th:inline="javascript">
    //获取应用路径
    var contextPath = [[${#request.getContextPath()}]];
</script>-->
<script type="text/javascript">
    // $(function() {
    //     $("#image1").uploadify({
    //         height        : 30,
    //         multi : false,
    //         fileSizeLimit : '2MB',
    //         fileDataName : 'image',
    //         progressData : 'percentage',
    //         'fileTypeDesc' : '格式:jpeg',     //描述
    //         fileTypeExts : '*.jpeg',
    //         buttonText : '选择jpg文件上传',
    //         swf           : contextPath+'/resource/uploadify/uploadify.swf',
    //         uploader      : contextPath+'/upload!uploadimage.action',
    //         width         : 140,
    //         onUploadSuccess : function(file, data, response) {
    //             var json = jQuery.parseJSON(data);
    //             var url=json.filePath;
    //             $("#srcname").val(json.name);
    //             // $("#srcImage").attr("src",contextPath+'/cut!download.action?filePath='+url);
    //             $("#srcImage").attr("src",'/cut?filePath='+url);
    //             $("#srcImage").Jcrop({
    //                 aspectRatio : 1,
    //                 onChange : showCoords,
    //                 onSelect : showCoords,
    //                 minSize :[100,100]
    //             });
    //         }
    //     });
    //
    // });
    function showCoords(obj) {
        $("#x").val(obj.x);
        $("#y").val(obj.y);
        $("#w").val(obj.w);
        $("#h").val(obj.h);
    }
    $("#cut-submit").click(function(){
        var xlength=$("#x").val();
        var ylength=$("#y").val();
        var wlength=$("#w").val();
        var hlength=$("#h").val();
        var imagename=$("#srcname").val();
     /*   $.ajax({
            method:"post",
            data:{x:xlength,y:ylength,w:wlength,h:hlength,imagename:imagename},
            url:contextPath+"/cut",
            success:function(data){
                alert(data);
                alert("11111111111111111111111111111");
                var json = jQuery.parseJSON(data);
                var uri=json.filePath;
                $("#userImg").attr("src",data.val());
            //    contextPath+'/cut?filePath='+uri
            }
        });*/

    });
</script>
</html>